<template>
  <div class="training-session-page">
    <div class="session-container">
      <!-- Header -->
      <div class="header">
        <van-nav-bar 
          title="Training Session" 
          left-text="Back" 
          left-arrow 
          @click-left="$router.back()"
        />
      </div>

      <!-- Session Content -->
      <div class="session-content">
        <div class="placeholder">
          <van-icon name="chat-o" />
          <p>Training session details will be displayed here</p>
          <p>Session ID: {{ $route.params.sessionId }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'

const route = useRoute()
</script>

<style lang="scss" scoped>
.training-session-page {
  min-height: 100vh;
  background: $background-color;
}

.session-container {
  max-width: 400px;
  margin: 0 auto;
  background: $white;
  min-height: 100vh;
}

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: $white;
  border-bottom: 1px solid $border-color;
}

.session-content {
  padding: $spacing-lg;
  
  .placeholder {
    text-align: center;
    padding: $spacing-xl;
    
    .van-icon {
      font-size: 48px;
      color: $text-color-3;
      margin-bottom: $spacing-md;
    }
    
    p {
      color: $text-color-3;
      font-size: $font-size-md;
      margin-bottom: $spacing-sm;
    }
  }
}
</style>